<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
</head>

<body>
  <div id="app">
    <section>
      <input v-model.trim="nameVal" placeholder="名称">
      <input v-model.number="ageVal" type="number" placeholder="年龄">
      <button @click="addInfo">新增</button>
    </section>
    <hr>

    <button @click="delSelect">删除选中</button>
    <button>按照年龄从大到小排序</button>
    <button>按照ID从小到大排序</button>
    <button @click="allSelect">全选</button>
    <button @click="fanSelect">反选</button>
    <hr>

    <table border="1" cellspacing="0" cellpadding="5">
      <tr>
        <th>ID</th>
        <th>名称</th>
        <th>年龄</th>
        <th>操作</th>
        <th>选中</th>
      </tr>

      <template v-for="(item,index) in infoList">
        <tr :key="index">
          <td>{{item.id}}</td>
          <td>{{item.name}}</td>
          <td>{{item.age}}</td>
          <td><button @click="delInfo(index)">删除</button></td>
          <td><input type="checkbox" :value=item.id v-model="itemList"></td>
        </tr>
      </template>
    </table>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script type="text/javascript">
    let app = new Vue({
      el: "#app",
      data: {
        infoList: [{
          id: 1,
          name: "melon",
          age: 21
        }, {
          id: 2,
          name: "ricky",
          age: 18
        }, {
          id: 3,
          name: "bobo",
          age: 30
        }],
        nameVal: "",
        ageVal: "",
        index: 3,
        itemList: [],
        count: 0,

      },
      methods: {
        addInfo() {
          this.infoList.push({
            id: ++this.index,
            name: this.nameVal,
            age: this.ageVal
          })
          this.ageVal = this.nameVal = ""
        },
        delInfo(index) {
          this.infoList.splice(index, 1)
        },
        delSelect() {
          // 原始数据
          // this.infoList
          // 选中的数据
          // this.itemList

          this.infoList = this.infoList.filter(item => {
            return !this.itemList.includes(item.id)
          })
        },

        allSelect() {
          // console.log(this.infoList);
          this.count++;
          if (this.count % 2) {
            this.infoList.forEach(element => {
              this.itemList = element.id
            });
          } else {
            this.infoList.forEach(element => {
              this.itemList = [];
            });
          }



        },
        fanSelect() {



          if (this.itemList.length == 0) {
            this.infoList.forEach(element => {
              this.itemList = element.id
            });
          } else {
            this.infoList.forEach((element, index) => {
              if (!this.itemList.includes(element.id)) {
                // console.log(element.id);//23
                // this.itemList = !element.id

                // this.itemList.remove(element.id)
                // console.log(element.id);
                this.itemList.push(element.id);

              } else {

              }

            })

          }






        }

      }
    })
  </script>
</body>

</html>